<template>
  <div class="head">
    <div class="left">
      <i class="el-icon-caret-left"></i>
      返回
    </div>
    <h3 class="headFont">Music</h3>
    <div class="right">
      <div class="el-input el-input--small el-input--prefix">
        <input
          type="text"
          autocomplete="off"
          placeholder="搜索"
          class="el-input__inner"
          v-model="input"
          @keyup.enter="toResult"
        />
        <span class="el-input__prefix">
          <i class="el-input__icon el-icon-search"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
  methods: {
    toResult() {
      if (this.input == "") {
        this.$message.warning("请输入内容");
      } else {
        this.$router.push("/result?res=" + this.input);
      }
    },
  },
};
</script>

<style scope>
.head {
  width: 100%;
  height: 40px;
  text-align: center;
  background: #99a9bf;
}
.headFont {
  line-height: 40px;
  color: #fff;
  display: inline-block;
}
.left {
  float: left;
  line-height: 40px;
  color: #fff;
}
.left i {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
}
.right {
  float: right;
  line-height: 40px;
  margin-right: 50px;
}
</style>